<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <title>商品编辑</title>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css"/>
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- 富文本编辑器 -->
    <link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css"/>
    <script src="/plugins/kindeditor/kindeditor-min.js"></script>
    <script src="/plugins/kindeditor/lang/zh_CN.js"></script>
    <!-- 富文本编辑器 -->

    <script src="/js/vue.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/controller/goodsEditController.js"></script>
    <!-- 正文区域 /-->
    <script type="text/javascript">
        var editor;
        KindEditor.ready(function(K) {
            // 创建富文本编辑器
            editor = K.create('textarea[name="content"]');
        });
    </script>
</head>

<body class="hold-transition skin-red sidebar-mini">

<div id="app">
    {{loginSeller}}
    <!-- 正文区域 -->
    <section class="content">
        <div class="box-body">
            <!--tab页-->
            <div class="nav-tabs-custom">
                <!--tab头-->
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#home" data-toggle="tab">商品基本信息</a></li>
                    <li><a href="#pic_upload" data-toggle="tab">商品图片</a></li>
                    <li><a href="#customAttribute" data-toggle="tab">扩展属性</a></li>
                    <li><a href="#spec" data-toggle="tab">规格</a></li>
                </ul>
                <!--tab头/-->
                <!--tab内容-->
                {{goods}}
                <div class="tab-content">
                    <!--表单内容-->
                    <div class="tab-pane active" id="home">
                        <div class="row data-type">
                            <div class="col-md-2 title">商品分类</div>
                            <div class="col-md-10 data">
                                <table>
                                    <tr>
                                        <td>
                                            <select v-model="goods.category1Id" class="form-control">
                                                <option value="">===请选择一级分类===</option>
                                                <option :value="ele.id" v-for="ele in itemCatList1">{{ele.name}}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select v-model="goods.category2Id" class="form-control select-sm">
                                                <option value="">===请选择二级分类===</option>
                                                <option :value="ele.id" v-for="ele in itemCatList2">{{ele.name}}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select v-model="goods.category3Id" class="form-control select-sm">
                                                <option value="">===请选择三级分类===</option>
                                                <option :value="ele.id" v-for="ele in itemCatList3">{{ele.name}}</option>
                                            </select>
                                        </td>
                                        <td v-if="goods.typeTemplateId">模板ID:{{goods.typeTemplateId}}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-2 title">商品名称</div>
                            <div class="col-md-10 data">
                                <input v-model="goods.goodsName" type="text" class="form-control" placeholder="商品名称"/>
                            </div>

                            <div class="col-md-2 title">品牌</div>
                            {{brandList}}
                            <div class="col-md-10 data">
                                <select v-model="goods.brandId" class="form-control">
                                    <option value="">===请选择品牌===</option>
                                    <option :value="ele.id" v-for="ele in brandList">{{ele.text}}</option>
                                </select>
                            </div>

                            <div class="col-md-2 title">副标题</div>
                            <div class="col-md-10 data">
                                <input v-model="goods.caption" type="text" class="form-control" placeholder="副标题"/>
                            </div>

                            <div class="col-md-2 title">价格</div>
                            <div class="col-md-10 data">
                                <div class="input-group">
                                    <span class="input-group-addon">¥</span>
                                    <input v-model="goods.price" type="text" class="form-control" placeholder="价格"/>
                                </div>
                            </div>
                            <div class="col-md-2 title editer">商品介绍</div>
                            <div class="col-md-10 data editer">
                                    <textarea name="content" style="width: 800px; height: 400px; visibility: hidden;">
                                    </textarea>
                            </div>
                            <div class="col-md-2 title rowHeight2x">包装列表</div>
                            <div class="col-md-10 data rowHeight2x">
                                    <textarea v-model="goods.goodsDesc.packageList" rows="4" class="form-control" placeholder="包装列表">
                                    </textarea>
                            </div>
                            <div class="col-md-2 title rowHeight2x">售后服务</div>
                            <div class="col-md-10 data rowHeight2x">
                                    <textarea v-model="goods.goodsDesc.saleService " rows="4" class="form-control" placeholder="售后服务">
                                    </textarea>
                            </div>
                        </div>
                    </div>
                    <!--图片上传-->
                    <div class="tab-pane" id="pic_upload">
                        <div class="row data-type">
                            <!-- 颜色图片 -->
                            <div class="btn-group">
                                <button @click="picture={url:''}" type="button" class="btn btn-default" title="新建" data-target="#uploadModal" data-toggle="modal">
                                    <i class="fa fa-file-o"></i> 新建
                                </button>
                            </div>
                            <table class="table table-bordered table-striped table-hover dataTable">
                                <thead>
                                <tr>
                                    <th class="sorting">颜色</th>
                                    <th class="sorting">图片</th>
                                    <th class="sorting">操作</th>
                                </thead>
                                <tbody>
                                <tr v-for="(ele,index) in this.goods.goodsDesc.itemImages">
                                    <td>{{ele.color}}</td>
                                    <td><img :src="ele.url" width="100px" height="100px"></td>
                                    <td>
                                        <button @click="delItemImage(index)" type="button" class="btn btn-default" title="删除">
                                            <i class="fa fa-trash-o"></i> 删除
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--扩展属性-->
                    <div class="tab-pane" id="customAttribute">
                        <div class="row data-type">
                            <div v-for="ele in goods.goodsDesc.customAttributeItems">
                                <div class="col-md-2 title">{{ele.text}}</div>
                                <div class="col-md-10 data">
                                    <input v-model="ele.value" class="form-control" :placeholder="ele.text"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--规格-->
                    <div class="tab-pane" id="spec">
                        <div class="row data-type">
                            <div class="col-md-2 title">是否启用规格</div>
                            <div class="col-md-10 data">
                                <input :true-value="1" :false-value="0" v-model="goods.isEnableSpec"  type="checkbox">
                            </div>
                        </div>
                        {{goods.isEnableSpec}}
                        <p>

                        <div v-show="goods.isEnableSpec == 1">
                            <div class="row data-type">
                                <div v-for="ele in specification">
                                    <div class="col-md-2 title">{{ele.text}}</div>
                                    <div class="col-md-10 data">
                                        <span v-for="atom in ele.options"><input @click="selectOption($event,ele.text,atom.optionName);showSpecifications()" type="checkbox">{{atom.optionName}}</span>
                                    </div>
                                </div>
                            </div>
                        {{goods.goodsDesc.specificationItems}}
                        <hr/>
                        {{goods.itemList}}
                            <div class="row data-type">
                                <table class="table table-bordered table-striped table-hover dataTable">
                                    <thead>
                                    <tr>
                                        <th v-for="ele in goods.goodsDesc.specificationItems" class="sorting">{{ele.attributeName}}</th>
                                        <th class="sorting">价格</th>
                                        <th class="sorting">库存</th>
                                        <th class="sorting">是否启用</th>
                                        <th class="sorting">是否默认</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="item in goods.itemList">
                                        <td v-for="ele in goods.goodsDesc.specificationItems">{{item.spec[ele.attributeName]}}</td>
                                        <td><input v-model="item.price" class="form-control" placeholder="价格"></td>
                                        <td><input v-model="item.num" class="form-control" placeholder="库存数量"></td>
                                        <td><input :true-value="1" :true-value="0" v-model="item.status" type="checkbox"></td>
                                        <td><input type="checkbox"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!--tab内容/-->
                <!--表单内容/-->
            </div>
        </div>
        <div class="btn-toolbar list-toolbar">
            <button @click="saveOrUpdate" class="btn btn-primary">
                <i class="fa fa-save"></i>保存
            </button>
            <button class="btn btn-default">返回列表</button>
        </div>
    </section>
    <!-- 上传窗口 -->
    <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">上传商品图片</h3>
                </div>
                <div class="modal-body">
                    {{picture}}
                    <table class="table table-bordered table-striped">
                        <tr>
                            <td>颜色</td>
                            <td><input v-model="picture.color" class="form-control" placeholder="颜色"></td>
                        </tr>
                        <tr>
                            <td>商品图片</td>
                            <td>
                                <table>
                                    <tr>
                                        <td><input type="file" id="file"/>
                                            <button @click="uploadImg" class="btn btn-primary" type="button">上传</button></td>
                                        <td><img :src="picture.url" width="200px" height="200px"></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button @click="addItemImages" class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>